<template>
    <div class="numberCustomField">
        <div class="title">
            <span>自定义编号规则</span>
        </div>
        <!-- 表格 -->
        <table-list :tableGroup='tableGroup' ref='tableList' @getMsg='getMsg'>
        </table-list>
        <el-dialog title="配置规则" :visible.sync="dialogVisible" width="550px">
            <el-form :model="form" ref="form" label-width="150px" size="mini">
                <el-form-item label="目标表单">
                    <el-select v-model="form.type" disabled>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="border">
                    <el-form-item label="编号前缀">
                        <el-input v-model="form.prefix" placeholder="请填写"></el-input>
                    </el-form-item>
                    <el-form-item label="提交时间">
                        <el-radio-group v-model="form.time" @change='changeRadio'>
                            <el-radio :label="1">年</el-radio>
                            <el-radio :label="2">年月</el-radio>
                            <el-radio :label="3">年月日</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="流水号">
                        <el-input-number v-model="form.number" controls-position="right" :min="1" :max="8"
                            @change="changeNumber"></el-input-number>
                        <span style="margin-left:10px">位</span>
                        <span
                            style="margin-left: 20px; color: rgb(153, 153, 153);font-size:12px">例:{{enumExample[form.number]}}</span>
                    </el-form-item>
                    <el-form-item label="目标表单编号生成规则">
                        <el-input v-model="generateRules" readonly></el-input>
                    </el-form-item>
                    <div class="preview__2OFW_">
                        <span style="vertical-align: top;color:rgba(0,0,0,.85)">编号预览</span>
                        <span
                            style="color: rgb(51, 51, 51); font-size: 24px; letter-spacing: 2px; margin-left: 5px;">{{codePreview}}</span>
                    </div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        customNumHandle
    } from '@/api/customFieldController'
    import tableList from './tableList.vue'
    export default {
        data() {
            return {
                form: {
                    type: 1,
                    prefix: '',
                    time: 3,
                    number: 4
                },
                options: [{
                    value: 1,
                    label: '销售订单'
                }, {
                    value: 11,
                    label: '装配工单'
                }, {
                    value: 3,
                    label: '生产计划'
                }, {
                    value: 4,
                    label: '工单'
                }, {
                    value: 5,
                    label: '入库单'
                }, {
                    value: 6,
                    label: '出库单'
                }, {
                    value: 7,
                    label: '产品定义'
                }, {
                    value: 8,
                    label: '不良品项'
                }, {
                    value: 9,
                    label: '工序'
                }, {
                    value: 10,
                    label: '工艺路线'
                }],
                tableGroup: [{
                        label: 'type',
                        name: '目标表单名称',
                        width: '130'
                    },
                    {
                        label: 'fieldType',
                        name: '表单编号生成规则',
                        width: '130'
                    },
                ],
                dialogVisible: false,
                generateRules: '',
                codePreview: '',
                enumExample: {
                    1: '9',
                    2: '99',
                    3: '999',
                    4: '9999',
                    5: '99999',
                    6: '999999',
                    7: '9999999',
                    8: '99999999'
                },
                enumTime: {
                    1: '年',
                    2: '年月',
                    3: '年月日'
                },
                enumScope: {
                    1: '0-9',
                    2: '00-99',
                    3: '000-999',
                    4: '0000-9999',
                    5: '00000-99999',
                    6: '000000-999999',
                    7: '0000000-9999999',
                    8: '00000000-99999999'
                },
                enumCodePreview: {
                    1: '1',
                    2: '01',
                    3: '001',
                    4: '0001',
                    5: '00001',
                    6: '000001',
                    7: '0000001',
                    8: '00000001'
                },
                enumFormat:{
                    1:'yyyy',
                    2:'yyyyMM',
                    3:'yyyyMMdd'
                }
            }
        },
        components: {
            tableList
        },
        methods: {
            changeNumber() {
                this.getGenerateRules()
                this.getCodePreview()
            },
            getGenerateRules() {
                this.generateRules = this.form.prefix + '+' + this.enumTime[this.form.time] + '+' + this.enumScope[this
                    .form.number]
            },
            getCodePreview() {
                this.codePreview = this.form.prefix + new Date().dateFormat(this.enumFormat[this.form.time]) + this.enumCodePreview[this.form
                    .number]
            },
            getMsg(val) {
                this.form.id = val.id
                this.form.type = val.type
                this.form.prefix = val.prefix
                this.form.time = val.time
                this.form.number = val.number
                this.getGenerateRules()
                this.getCodePreview()
                this.dialogVisible = true
            },
            changeRadio() {
                this.getGenerateRules()
                this.getCodePreview()
            },
            //自定义编号编辑
            getCustomNumHandle(data) {
                customNumHandle(data).then(res => {
                    if (res.code == 200) {
                        this.$refs.tableList.getCustomNum({
                            page: 1,
                            limit: 10
                        })
                        this.dialogVisible = false
                        this.utils.showMsg('编辑成功','success')
                    }
                })
            },
            confirm() {
                this.getCustomNumHandle(this.form)
            }
        }
    }
</script>

<style lang="less" scoped>
    .numberCustomField {
        .title {
            padding: 20px 0 20px 20px;

            span {
                color: rgba(0, 0, 0, .85);
                font-weight: 500;
                font-family: sans-serif;
            }
        }

        /deep/ .el-dialog__title {
            color: rgba(0, 0, 0, .85);
            font-weight: 500;
            font-size: 14px;
        }

        /deep/ .el-dialog__body {
            padding: 30px 40px;
        }

        .el-form {

            .el-select,
            .el-input {
                width: 80%;
            }
        }

        .border {
            border: 1px solid rgb(237, 238, 243);
            background: rgb(251, 251, 251);
            padding: 20px 0;

            .preview__2OFW_ {
                width: 90%;
                background-color: #fff;
                background-image: none;
                border: 1px solid #d3d8e3;
                padding: 0 15px;
                line-height: 50px;
                margin: 0 auto;
            }
        }
    }
</style>